<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <el-avatar :src="avatarUrl" :size="80" />
          <h4>{{ store.state.userInfo.username }}</h4>
          <h6>{{ store.state.userInfo.role === 1 ? '管理员' : '编辑' }}</h6>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio
                  @change="changeSex(item.num)"
                  :label="item.num"
                  v-for="item in sexRadio"
                  :key="item.num"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
              <Upload :avatar="ruleForm.avatar" @change="handleChange" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { reactive, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import {baseUrl} from '@public/index';
import uploadFun from '@/util/uploadFun';
import Upload from '@/components/upload/Upload.vue';

const store = useStore();
const ruleFormRef = ref();
const { username, sex, avatar } = store.state.userInfo;
const ruleForm = reactive({
  username,
  sex,
  avatar,
  file: null, // 上传的原生文件对象
});
const sexRadio = reactive([
  { name: '保密', num: 0 },
  { name: '男', num: 1 },
  { name: '女', num: 2 },
]);
const avatarUrl = computed(() => (store.state.userInfo.avatar
  ? baseUrl + store.state.userInfo.avatar
  : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'));

const rules = reactive({
  username: [{ required: true, message: '请输入名字', trigger: 'blur' }],
  sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
  avatar: [{ required: true, message: '请选择头像', trigger: 'blur' }],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await uploadFun('/adminApi/user/upload', ruleForm);
      if (res.code === 200) {
        store.commit('getUserInfo', res.data);
        ElMessage({
          message: res.msg,
          type: 'success',
        });
      }
    }
    return false;
  });
};
const changeSex = (v) => {
  ruleForm.sex = v;
};

const handleChange = (file) => {
  ruleForm.avatar = URL.createObjectURL(file);
  ruleForm.file = file;
};
</script>

<style lang="scss" scoped>
.box-card {
  text-align: center;
}
</style>
